<template>
  <van-pull-refresh v-model="pullDownLoading" @refresh="onPullingDown">
    <!-- 首页头部 -->
    <div class="home-header">我是头部</div>
    <!-- /首页头部 -->
    <div class="container">
      <!-- 轮播 -->
      <van-swipe class="home-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <van-grid clickable>
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :text="cate.name"
          :to="'/itemLists/' + cate.id"
        />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品列表 -->
      <h2>推荐商品列表</h2>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="---我也是有底线的---"
        @load="reachBottom"
        :immediate-check="false"
      >
        <Items :items="items" @onAddCart="onAddCart" />
      </van-list>
      <!-- /推荐商品列表 -->
    </div>
    <van-back-top right="15vw" bottom="10vh" />
    <Tabbar />
  </van-pull-refresh>
</template>

<script setup lang="ts" name="Home">
import { ref, onMounted } from "vue";
import Tabbar from "@/components/Tabbar.vue";
import api from "@a/index";
import Items from "./components/Items.vue";
import useCartStore from "@/stores/cart";
const cartStote = useCartStore();
// 加入购物车
const onAddCart = (id: number) => {
  cartStote.addCart({
    goodsId: id,
    number: 1,
  });
};

// 处理首页轮播
const banners = ref<any[]>([]);
const fetchBanner = () => {
  api.fetchHomeBanner().then((res) => {
    if (res.data.code === 0) {
      banners.value = res.data.data;
    }
  });
};
// 获取首页宫格分类数据
const cates = ref<Cate[]>([]);
const fetchCates = () => {
  api.fetchCates().then((res) => {
    if (res.data.code === 0) {
      cates.value = res.data.data;
    }
  });
};

// 首页下拉刷新
const pullDownLoading = ref(false);
const onPullingDown = () => {
  page = 1;
  items.value = [];
  finished.value = false;
  fetchItems();
};
// 首页推荐商品的功能
let page = 1;
const loading = ref(false); // 是否处于触底状态
const finished = ref(false); // 列表是否已经没有数据
// 列表上啦触底了
const reachBottom = () => {
  page++;
  fetchItems();
};
const items = ref<Item[]>([]);

const fetchItems = () => {
  api
    .fetchItems({
      page,
      pageSize: 5,
    })
    .then((res) => {
      pullDownLoading.value = false;
      loading.value = false;
      if (res.data.code === 0) {
        items.value = [...items.value, ...res.data.data.result];
      }
      if (res.data.code === 700) {
        // 已经没有列表数据
        finished.value = true;
      }
    });
};
onMounted(() => {
  fetchBanner();
  fetchCates();
  fetchItems();
});
</script>

<style lang="scss" scoped>
.home-header {
  width: 100%;
  height: 40px;
  background-color: #ff4f25;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
}
.container {
  padding: 40px 0 50px 0;
  .home-swipe {
    width: 10rem;
    height: 5rem;
    img {
      width: 10rem;
      height: 5rem;
    }
  }
}
</style>
